import React from 'react';

import {
  View,
  TouchableOpacity,
  Text,
  Picker,

Image,
} from 'react-native';

import {SearchBar} from 'react-native-elements';
import Platform from 'Platform';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import CommonStyles from '../../common/CommonStyles';
import BaseItem from '../common/BaseItem';
import CommonSearchListPage from '../common/CommonSearchListPage';
import TImage from '../../components/TImage';
import QZ_SearchContentAction from '../../actions/quanzi/QZ_SearchContentAction';
import {DateUtils} from '../../utils/Utils';

export default class QZ_ContentSearchPage extends CommonSearchListPage {
  constructor(props) {
    super(props);
  }

  _renderTopView() {
    return (
      <View style={{flexDirection:"row",
         borderColor: '#eeeeee',
         height:SizeUtils.translateDesignHeightToCode(90),
         paddingLeft:SizeUtils.translateDesignWidthToCode(40),
         paddingRight:SizeUtils.translateDesignWidthToCode(40),
         borderBottomWidth: SizeUtils.translateDesignNumToCode(3)}}>
        {this._renderSearchBg()}
      </View>
    )
  }

  _getSearchBarContainerStyle() {
    return {width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(160),
      borderTopWidth:0,borderBottomWidth:0,
      height:SizeUtils.translateDesignHeightToCode(62),backgroundColor:"#00000000",};
  }

  _getListViewStyle() {
    return {
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(40 + 90)),
        backgroundColor:"#ffffff"};
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.quanzi_post_content, data);
  }

  _onRenderItem(data, index) {
    return (<Item data={data} index={index} />)
  }

  _sendAction(page, listView) {
    new QZ_SearchContentAction().call(listView, {key:this.state.searchText,
      board_id:this.props.pageData.routeData.board_id, page:page})
  }
}


class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  render() {
    return (
        <View
          style={{
            paddingTop:SizeUtils.translateDesignHeightToCode(40),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),backgroundColor:"#ffffff",
              marginRight:SizeUtils.translateDesignWidthToCode(40), borderColor:"#eeeeee",
              paddingBottom:SizeUtils.translateDesignHeightToCode(40),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
             <Text numberOfLines={2}
                    style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(32)}]}>
                      {this.props.data.title}
             </Text>
            {this._renderCurrentImages()}
           <View style={{flex:1}} >
             <Text style={{fontSize:SizeUtils.translateFontSizeToCode(22), color:"#999999", paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
              {this._getBottomText()}
             </Text>
           </View>
        </View>

    )
  }


  _getBottomText(){
    return this.props.data.comments_num +
                " 评论 · 发布时间:" + DateUtils.formatDate2(this.props.data.posted_at);
  }

   _renderCurrentImages() {
    if(this.props.data.image_urls){
        return (<View style={{marginTop:SizeUtils.translateDesignHeightToCode(30)}}><TImage source={{uri:this.props.data.image_urls[0]}} style={{width:660, height:360}}/></View>)

    }else {
      return(<View></View>)
    }
  }

  _renderCurrentImageItem(imageData, index) {
    this._itemRefs = [];
    // console.log("=============", this._itemRefs);
    return (<TImage source={imageData} style={{width:28, height:28}}/>
      )
  }


}
